<template>
  <header id="header">
    <div id="logo">欢迎来到我的个人网站</div>
    <ul class="navbar-nav" id="nav">
      <li data-menuanchor="slide01" class="active"><a href="#" @click="slideNext(0)">首页</a></li>
      <li data-menuanchor="slide02"><a href="#" @click="slideNext(1)">关于我</a></li>
      <li data-menuanchor="slide06"><a href="#" @click="slideNext(2)">我的技能</a></li>
      <li data-menuanchor="slide03"><a href="#" @click="slideNext(3)">图片集</a></li>
      <li data-menuanchor="slide04"><a href="#" @click="slideNext(4)">作品集</a></li>
      <li data-menuanchor="slide06"><a href="#" @click="slideNext(5)">谢谢观看</a></li>
      <li data-menuanchor="slide06">
        <a @click="MyResume()">个人简历</a></li>
    </ul>
  </header>
  <swiper
      :direction="'vertical'"
      :slidesPerView="1"
      :spaceBetween="30"
      :mousewheel="true"
      :pagination="{
      clickable: true,
    }"
      :modules="modules"
      class="mySwiper"
      @swiper="onSwiper"
  >
    <swiper-slide>
      <div class="section-inner" style="margin-top: 100px">
        <div class="welcome-box">
          <span class="welcome-first animate" data-animate="fadeInUp">我叫</span>
          <h3 class="welcome-title animate" data-animate="fadeInUp">林平文</h3>
          <p class="animate" data-animate="fadeInUp">Java开发工程师一枚，就读于云南农业职业技术学院，大数据技术与应用专业，于2023年6月毕业。
            我所学的大数据是基于Java语言的，所以我对Java语言比较感兴趣，大二上学期决定从事Java开发工作，乐于尝试新技术，学习能力强。在2022年8月在北京的
            北京远卓科技有限公司担任Java开发实习生。
            除了Java开发，我对前端也有所掌握，对于Vue、element
            ui、echarts能熟练使用，并且对大数据的集群搭建有一定经验；在校我也参加省技能大赛软件测试，对软件测试有过系统的学习。
            目前，我个人主要围绕Java语言，进一步研究顶层，为以后朝着全栈开发而奋斗！</p>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="section-inner" style="margin-top: 50px">
        <div class="about-section">
          <div class="justify-content-center">
            <div class="col-md-6">
              <div class="about-contentbox">
                <div class="animate" data-animate="fadeInUp">
                  <span>关于我</span>
                  <h2>Who am i?</h2>
                  <p>从小学5年级接触智能手机，初一接触电脑，从小就对计算机这块有很浓厚的兴趣<br>
                    在高中时，看到一个视频QQ消息轰炸，当时很感兴趣，我自己在网吧也学着去弄，照着网上的教程，最后成功了，通过Python实现的，就此开始了人生的第一次编程。<br>
                    大学期间，担任班级学习委员。大一参加学校组织的大字大赛，Html静态网页设计大赛，大二参加学校的省技能大赛筛选，最终进入参赛队伍，在校做过的卓越项目，都是我个人独自完成的，所以独立开发对我没有问题。
                    在校期间，我也不断学习课本之外的知识，增加自己的知识面；在校两年的时间里我获得过两次国家励志奖学金和国家助学金，也在2021年“信创大比武基础应用开发赛道”中获得全国30强的名次<br>
                    2022年7月份决定从事Java开发工作。
                    现在平时有空喜欢去CSDN写博客、到掘金逛逛、到GitHub逛逛、到力扣刷题，抖音、快手、哔哩哔哩我也关注很多技术大佬，平时也都会跟着他们学习。
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <figure class="animate about-contentbox" data-animate="fadeInUp">
                我的讲师和我说过：“以我现在的水平找个工作不成问题，但是要想找到好的工作还需要继续加油。”<br>
                大二学年，我在教室备战技能大赛，我的讲师也在教室里备考软考，系统架构师，我看着他的资料和书籍，比我以前看过的小说都多，所以这也让我明白学海无涯，我在出了学校之后我也在继续学习，让自己的知识面变得更广。
              </figure>
            </div>
          </div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="title-block animate" data-animate="fadeInUp" style="padding-top: 150px">
        <h2>我的技能</h2>
      </div>
      <swiper
          :slidesPerView="3"
          :spaceBetween="30"
          :freeMode="true"
          :pagination="{
      clickable: true,
    }"
          :modules="modules"
          class="mySwiper"
          style="height: 400px"
      >

        <swiper-slide>
          <div class="services-section">
            <div class="services-list owl-carousel">
              <div class="item animate" data-animate="fadeInUp">
                <div class="service-box">
                  <span class="service-icon"><i class="iconfont icon-js"></i></span>
                  <h3>Java方面</h3>
                  <p>通过网上教程及在校所学的知识，掌握了Java基础、高级、Web的知识点对Mybatis,Spring、SpringMVC、SpringBoot、SpringCloud框架有所使用
                    ，熟悉框架的使用方法，目前正在看Spring框架的源码，对第三方工具FastJson,EasyExcel,POM、JWT等有所掌握；在数据库方面主要是围绕Mysql，
                    在北京远卓实习时也学会了使用Oracle数据库。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="services-section">
            <div class="services-list owl-carousel">
              <div class="item animate" data-animate="fadeInUp">
                <div class="service-box">
                  <span class="service-icon"><i class="iconfont icon-js"></i></span>
                  <h3>前端方面</h3>
                  <p>通过网上教程及在校所学的知识，Html、Css、Js都能熟练使用，Vue2、Element
                    ui、Echarts、Axios能够使用，通过这些技术完成了个大数据大屏的项目，Vue3、Swiper有所了解我的这个个人网站就是通过这些完成的。前端我也接触的比较多，一些比较简单的页面我还是能够完成的，但因为侧重点主要是Java后端，所以对前端掌握还是不够多。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="services-section">
            <div class="services-list owl-carousel">
              <div class="item animate" data-animate="fadeInUp">
                <div class="service-box">
                  <span class="service-icon"><i class="iconfont icon-js"></i></span>
                  <h3>服务器方面</h3>
                  <p>我所掌握的服务端系统是Contos7，服务器是Tomcat，Nacos有所了解，是接触Spring Colud
                    alibaba的时候接触的，因为我比较喜欢官方的版本所以对于Nacos没有太多的深入。并且我个人有多大数据集群的搭建所以
                    对于Linux较为熟悉，我也有过Web项目的部署，因此在部署项目有一定的经验。
                    <br>
                    <br>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="services-section">
            <div class="services-list owl-carousel">
              <div class="item animate" data-animate="fadeInUp">
                <div class="service-box">
                  <span class="service-icon"><i class="iconfont icon-js"></i></span>
                  <h3>软件测试方面</h3>
                  <p>通过在学校参加软件测试的技能大赛，对软件的流程较为熟悉，对测试文档的编写、Python
                    Selenium自动化测试程序编写、Loadrunner和Jmeter压力测试都有所程度的掌握。
                    <br>
                    <br>
                    <br>
                    <br>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </swiper-slide>
    <swiper-slide>
      <div class="title-block animate" data-animate="fadeInUp" style="padding-top: 50px">
        <h2>图片集</h2>
      </div>
      <swiper
          :slidesPerView="3"
          :spaceBetween="30"
          :slidesPerGroup="3"
          :loop="true"
          :loopFillGroupWithBlank="true"
          :pagination="{
      clickable: true,
    }"
          :navigation="true"
          :modules="module"
          class="mySwiper"
          style="height: 600px"
      >
        <swiper-slide data-hash="slide1"><img src="../assets/img/zb1.jpg">
          <br>
          <h3>正装</h3>
        </swiper-slide>
        <swiper-slide data-hash="slide1"><img src="../assets/img/gjz1.png">
          <br>
          <h3>国励志</h3>
        </swiper-slide>
        <swiper-slide data-hash="slide1"><img src="../assets/img/xinichuang.png">
          <br>
          <h3>信创证书</h3>
        </swiper-slide>
        <swiper-slide data-hash="slide1"><img src="../assets/img/xc2.jpg">
          <br>
          <h3>信创比赛</h3>
        </swiper-slide>
        <swiper-slide data-hash="slide1"><img src="../assets/img/xc3.jpg"><br>
          <h3>信创比赛</h3></swiper-slide>
        <swiper-slide data-hash="slide1"><img src="../assets/img/xc4.jpg"><br>
          <h3>信创比赛</h3></swiper-slide>
        <swiper-slide data-hash="slide1"><img src="../assets/img/xc5.jpg"><br>
          <h3>信创比赛</h3></swiper-slide>
        <swiper-slide data-hash="slide1"><img src="../assets/img/rs3.png">
          <br>
          <h3>软赛证书</h3>
        </swiper-slide>
        <swiper-slide data-hash="slide1"><img src="../assets/img/rs2.jpg">
          <br>
          <h3>软赛宣言</h3>
        </swiper-slide>
        <swiper-slide data-hash="slide1"><img src="../assets/img/rs1.jpg">
          <br>
          <h3>软赛颁奖</h3></swiper-slide>
        <swiper-slide data-hash="slide1"><img src="../assets/img/xw1.png">
          <br>
          <h3>学委聘书</h3></swiper-slide>
      </swiper>
    </swiper-slide>
    <swiper-slide>
      <div class="title-block animate" data-animate="fadeInUp" style="padding-top: 50px">
        <h2>作品集</h2>
      </div>
      <swiper
          :slidesPerView="2"
          :spaceBetween="30"
          :freeMode="true"
          :pagination="{
      clickable: true,
    }"
          :modules="modules"
          class="mySwiper"
          style="height: 600px"
      >
        <swiper-slide data-hash="slide1">
          <div class="services-section">
            <br>
            <br>
            <br>
            <div class="services-list owl-carousel">
              <div class="item animate" data-animate="fadeInUp">
                <div class="service-box" style="text-align: left">
                  <span class="service-icon"><i class="iconfont icon-js"></i></span>
                  <h3>云农职疫情大数据监控平台</h3>
                  <p>技术栈：<br>
                    前端:Vue+Cli+Echarts+DataV+Axios+ElementUI<br>
                    后端:SpringBoot+Mybatis+Lombok+ApachePOI+JWT<br>
                    数据库:MySQL+Navicat<br>
                    [目标]:通过学校使用的今日校园App，将学生在疫情防控期间所外出行程进行大数据监控，防止疫情进入学校<br>
                    [个人]:个人完成<br>
                    [效果]:作品最终取得云农职2022软件设计大赛——团队三等奖在本次项目的技术选型中我选择市面上主流框架来进行开发,同过自己两个月的自学,进一步的锻炼了我的自 学能力;也使我更加了解前后端分离模式地开发,让我提前了解企业级开发的模式,同时随着代码的量变 大使我养成了良 好的编码习惯;同时也让我知道了自己还有东西要学习,不能盲目自信。
                  </p>
                </div>
              </div>
            </div>
           <div style="font-size: 16px;text-align: left">
             项目地址:<a @click="Ynz()">项目地址链接</a><br>
             账号:林平文 密码:123456<br>
             Gitee地址:<a @click="YnzQ()">前端链接</a>    <a @click="YnzH()">后端链接</a><br>
           </div>
          </div>
        </swiper-slide>
        <swiper-slide data-hash="slide1">
          <div class="services-section">
            <br>
            <br>
            <br>
            <div class="services-list owl-carousel">
              <div class="item animate" data-animate="fadeInUp">
                <div class="service-box" style="text-align: left">
                  <span class="service-icon"><i class="iconfont icon-js"></i></span>
                  <h3>linbaobao个人网站搭建</h3>
                  <p>技术栈：<br>
                    前端:Vue3、Swiper8<br>
                    [目标]:<br>
                    [个人]:个人完成<br>
                    [效果]:该项目就是你现在所看的项目，目前只是由Vue和Swiper完成的静态项目，还没有添加后端支持，打算在后期将所以信息保存在数据库，加上注册功能给有需要的小伙伴展示自己。
                  </p>
                </div>
              </div>
            </div>
            <div style="font-size: 16px;text-align: left">
              项目地址:<a @click="Ynz()">项目地址链接</a><br>
              Gitee地址:<a @click="Linbaobao()">前端链接</a>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide data-hash="slide1">
          <div class="services-section">
            <br>
            <br>
            <br>
            <div class="services-list owl-carousel">
              <div class="item animate" data-animate="fadeInUp">
                <div class="service-box" style="text-align: left">
                  <span class="service-icon"><i class="iconfont icon-js"></i></span>
                  <h3>mydaliy</h3>
                  <p>技术栈：<br>
                    技术栈：Servlet+Jsp+JDBC+Layui+Maven<br>
                    [目标]模拟用户平常写日记而编写的日记网站，和QQ空间相似。<br>
                    [个人]由我个人独立完成<br>
                    [收获]进一步加深对Servlet+Jsp动态Web的编写,不断学习新知识,把自己能想到的功能完善;进一步了解Tomcat服务 器和Web的开发流程;个人编写,进一步锻炼自己独立完成项目的能力。并在大二学年卓越项目取得A的成绩。<br>
                  </p>
                </div>
              </div>
            </div>
            <div style="font-size: 16px;text-align: left">
              项目地址:因本人云服务器内存限制，不能运行过多的项目，所以该项目未部署至云服务器。<br>
              Gitee地址:<a @click="Mydaily()">项目链接</a>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide data-hash="slide1">
          <div class="services-section">
            <br>
            <br>
            <br>
            <div class="services-list owl-carousel">
              <div class="item animate" data-animate="fadeInUp">
                <div class="service-box" style="text-align: left">
                  <span class="service-icon"><i class="iconfont icon-js"></i></span>
                  <h3>当当图书网</h3>
                  <p>技术栈：<br>
                    技术栈：Servlet+Jsp+JDBC+Maven<br>
                    [目标]模拟当当图书网，提升自己的编码能力<br>
                    [团队]主体是我个人完成，我讲师在这项目教我如何封装，将Servlet封装成类似于Spring MVC的Control,并且使用了设计模式。<br>
                    [收获]进一步加深对Servlet+Jsp动态Web的编写,并使我更加懂得设计模式，和方法的封装，使我受益良多。<br>
                  </p>
                </div>
              </div>
            </div>
            <div style="font-size: 16px;text-align: left">
              项目地址:因本人云服务器内存限制，不能运行过多的项目，所以该项目未部署至云服务器。<br>
              Gitee地址:<a @click="Dang()">项目链接</a>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="services-section">
            <div class="services-list owl-carousel">
              <div class="item animate" data-animate="fadeInUp">
                <div class="service-box" style="text-align: left">
                  <span class="service-icon"><i class="iconfont icon-js"></i></span>
                  <h3>微信推送</h3>
                  <p>技术栈：<br>
                    技术栈：Springboot、weixin-java-mp(微信第三方推送工具)、Fastjson<br>
                    [目标]熟悉微信公众号开发流程<br>
                    [收获]该项目通过微信开发者平台的测试账号编写，通过httpClient接入百度地图和彩虹屁API实现天气的更新和情话的获取，通过@Scheduled注解实现定时任务<br>
                  </p>
                  图片展示:<img src="../assets/img/gzh.jpg">
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </swiper-slide>
    <swiper-slide>
      <div class="section-inner">
        <div class="row justify-content-center">
          <div class="col-md-8 wide-col-laptop">
            <div class="title-block animate" data-animate="fadeInUp">
              <h2>感谢您的观看！</h2>
              <span>个人的码云地址，里面有本人在校的一些课程设计，项目源码以及学习笔记：</span><br/>
              <a href="https://toscode.gitee.com/linsunsun" target="_blank">https://toscode.gitee.com/linsunsun</a><br/>
              <span>个人CSDN，后续会将在编码学习中遇到的问题更新至博客上</span><br/>
              <a href="https://blog.csdn.net/LLCLK?type=blog" target="_blank">https://blog.csdn.net/LLCLK?type=blog</a><br/>
            </div>
          </div>
        </div>
      </div>
    </swiper-slide>
  </swiper>
</template>
<script>
import {Swiper, SwiperSlide} from "swiper/vue";
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/scrollbar';
import "swiper/css/pagination";
import {Mousewheel, Pagination, Navigation} from "swiper";

export default {
  name: "HomeView",
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    let useSwiper = undefined;
    const onSwiper = (swiper) => {
      useSwiper = swiper
    };
    const slideNext = (num) => {
      useSwiper.slideTo(num, 1000, false);//切换到第一个slide，速度为1秒
    }
    return {
      onSwiper,
      slideNext,
      modules: [Mousewheel, Pagination],
      module: [Navigation, Pagination],
    };
  },methods:{
    Ynz(){
      window.open("http://114.132.150.39:8080")
    },
    YnzQ(){
      window.open("https://toscode.gitee.com/linsunsun/ynnz-big-data-vue")
    },
    YnzH(){
      window.open("https://toscode.gitee.com/linsunsun/ynnz-big-data")
    },
    Linbaobao(){
      window.open("https://toscode.gitee.com/linsunsun/linbaobao")
    },
    Mydaily(){
      window.open("https://toscode.gitee.com/linsunsun/mydaliy")
    },
    Dang(){
      window.open("https://toscode.gitee.com/linsunsun/SoftRequirementsSpecification/tree/master/T")
    },
    MyResume(){
      this.$router.push("/MyResume")
    },
  }
};
</script>
<style scoped src="../assets/css/IndexOage.css">
</style>